<template>
  <div>
    <!-- 客户数据看板-客户购买频次分布 -->
    <div class="clientData" id="clientData" ref='clientData'></div>
    <!-- 客户数据看板-客户购买频次分布 -->
  </div>
</template>

<script>
/**
 *       frequency: { // 客户购买频次分布
 *         config: {
 *           dataList: ['2次以下（不含两次）', '2-3次', '4-5次', '5次以上（不含5次）']
 *         },
 *         dataList: [
 *           {
 *             color: '#4168e7',
 *             name: 'GMV',
 *             list: [120, 250, 150, 80, 70, 110, 130]
 *           }
 *         ]
 *       },
 */
import 'echarts/map/js/china.js'

export default {
  name: 'comparison',
  props: {
    documentId: {
      type: String,
      default: () => ''
    },
    config: {
      type: Object,
      default: () => {
      }
    },
    dataList: {
      type: Object,
      default: () => {
      }
    },
    loading: {
      type: Boolean,
      default: () => false
    }
  },
  data () {
    return {
      // levelList: null
    }
  },
  watch: {
    $route () {
      // this.testFun()
    },
    dataList: {
      deep: true,
      handler (newVal, oldVal) {
        this.handlerClientData()// 客户数据看板-客户购买频次分布
      }
    }
  },
  mounted () {
    this.$nextTick(_ => {
      this.handlerClientData()// 客户数据看板-客户购买频次分布
    })
  },
  created () {
  },
  methods: {
    // 客户数据看板
    handlerClientData () {
      // console.log('%c客户数据看板', 'color:#fff;font-size:1.2rem;padding:0.8rem 1.6rem;border-radius: 5px;background-color: #3eaf7c;font-family: "Microsoft YaHei",Arial,sans-serif;')
      const config = this.config
      const colorArr = config.colorArr
      const tempPeopleNumArr = [...this.dataList.peopleNum] // 人数
      const tempProportionArr = [...this.dataList.proportion] // 比占
      const xDataArr = config.dataList
      const tempDataList = []
      tempPeopleNumArr.forEach((item, index) => {
        tempDataList.push({ peopleNum: item, value: tempProportionArr[index] })
      })
      // const yDataArr = tempProportion
      const seriesDateArr = []
      const tempSeriesDate = {
        type: 'bar',
        barWidth: '50%',
        itemStyle: { normal: { barBorderRadius: [6, 6, 0, 0] } }, // 设置柱子是否圆角
        label: {
          show: true, position: 'inside',
          formatter (params) {
            // console.log(params.value)
            return `${params.value}%`
          }
        },
        data: tempDataList
      }
      seriesDateArr.push(tempSeriesDate)
      const clientData = this.$echarts.init(document.getElementById('clientData'))
      clientData.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: { type: 'shadow' }, // 坐标轴指示器，坐标轴触发有效 默认为直线，可选为：'line' | 'shadow'
          extraCssText: 'box-shadow: 0px 4px 12px rgba(51, 51, 51, 0.1);',
          textStyle: { color: '#333333' }, // 设置文字颜色
          borderColor: '#2D8CF0', // 设置边框颜色
          backgroundColor: '#fff', // 设置背景颜色
          formatter (params) {
            // console.log(params[0])
            // 返回值就是html代码可以使用标签
            return `
            ${params[0].marker}
            ${params[0].name}</br>
            总体：${params[0].value.toFixed(2)}% ${params[0].data.peopleNum}人`
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          top: '10%',
          containLabel: true // grid区域是否包含坐标轴的刻度标签
        },
        xAxis: {
          data: xDataArr
        },
        yAxis: {
          type: 'value',
          data: tempProportionArr
        },
        series: seriesDateArr,
        color: colorArr
      })
      window.addEventListener('resize', function () {
        clientData.resize()
      })
    }
  }
}
</script>
<style scoped lang="scss">
.clientData {
  width: 100%;
  height: 500px;
}
</style>
